import ReactDOM from 'react-dom/client'
import './index.scss'
import App from './App'
import reportWebVitals from './reportWebVitals'
import './mock/index'

import { Suspense } from 'react'
import { ConfigProvider } from 'antd'
// 引入 redux 和 provider
import { Provider } from 'react-redux'
import store from './store'
import { Spin } from 'antd'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

root.render(
  // 严格模式会导致 useEffect 调用两次
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>

  <ConfigProvider
    theme={{
      components: {
        // Seed Token，影响范围大
        Form: {
          itemMarginBottom: 12
        }
      }
    }}
  >
    <Suspense
      fallback={
        <div>
          <Spin />
        </div>
      }
    >
      <Provider store={store}>
        <App />
      </Provider>
    </Suspense>
  </ConfigProvider>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()
